<template>
    <div class="myreserve">
        <div class="record">
            <h4>预约记录</h4>
        </div>
        <div>
            <el-table :data="myReserveList" style="width: 100%;font-size: 13px;">
                <el-table-column prop="petName" label="宠物名字" width="">
                </el-table-column>
                <el-table-column prop="doctorName" label="医生名">
                </el-table-column>
                <el-table-column prop="description" label="症状描述">
                </el-table-column>
                <el-table-column prop="reserveTime" label="预约时间">
                </el-table-column><el-table-column prop="reserveTime" label="预约时间">
                </el-table-column>
                <el-table-column prop="reserveTime" label="状态">
                    <template slot-scope="scope">
                        <el-tag type="primary" v-if="scope.row.treateStatus === 0">已预约</el-tag>
                        <el-tag type="warning" v-if="scope.row.treateStatus === 1">已就诊</el-tag>
                    </template>
                </el-table-column>
            </el-table>
        </div>
    </div>
</template>

<script>
export default {
    data() {
        return {
            myReserveList: []
        }
    },
    created() {
        this.getMyReserveList()
    },
    methods: {
        getMyReserveList() {
            //根据客户Id获取自己的预约列表数据
            var customerId = JSON.parse(localStorage.getItem("customer")).id
            this.request.get("/reserve/" + customerId).then(res => {
                if (res.code == 200) {
                    this.myReserveList = res.data
                    console.log(res.data)
                }
            })
        }
    },
}
</script>

<style lang="less" scoped>
.myreserve {
    padding: 0;

    .record {
        height: 40px;
        border-bottom: 1px solid gray;
    }
}
</style>